{% extends "base.html" %}

{% block title %}添加学生{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <h2 class="mb-4">添加学生</h2>
        <form method="POST">
            <h4>学生信息</h4>
            <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="mb-3">
                <label for="gender" class="form-label">性别</label>
                <select class="form-control" id="gender" name="gender" required>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="birth_date" class="form-label">出生日期</label>
                <input type="date" class="form-control" id="birth_date" name="birth_date" required>
            </div>
            <div class="mb-3">
                <label for="id_card" class="form-label">身份证号码</label>
                <input type="text" class="form-control" id="id_card" name="id_card" required>
            </div>
            <div class="mb-3">
                <label for="address" class="form-label">家庭住址</label>
                <input type="text" class="form-control" id="address" name="address" required>
            </div>

            <h4 class="mt-4">家长信息</h4>
            <div class="mb-3">
                <label for="parent_id" class="form-label">选择已有家长</label>
                <select class="form-control" id="parent_id" name="parent_id">
                    <option value="">新建家长信息</option>
                    {% for parent in parents %}
                    <option value="{{ parent.id }}">{{ parent.name }} (电话: {{ parent.phone }})</option>
                    {% endfor %}
                </select>
            </div>

            <div id="new_parent_info">
                <div class="mb-3">
                    <label for="parent_name" class="form-label">家长姓名</label>
                    <input type="text" class="form-control" id="parent_name" name="parent_name">
                </div>
                <div class="mb-3">
                    <label for="phone" class="form-label">联系电话</label>
                    <input type="tel" class="form-control" id="phone" name="phone">
                </div>
            </div>

            <div class="mb-3">
                <label for="parent_relation" class="form-label">与学生关系</label>
                <select class="form-control" id="parent_relation" name="parent_relation" required>
                    <option value="父亲">父亲</option>
                    <option value="母亲">母亲</option>
                    <option value="其他监护人">其他监护人</option>
                </select>
            </div>

            <div class="mb-3">
                <button type="submit" class="btn btn-primary">提交</button>
                <a href="{{ url_for('list_students') }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('parent_id').addEventListener('change', function() {
    var newParentInfo = document.getElementById('new_parent_info');
    var parentNameInput = document.getElementById('parent_name');
    var phoneInput = document.getElementById('phone');
    
    if (this.value) {
        newParentInfo.style.display = 'none';
        parentNameInput.required = false;
        phoneInput.required = false;
    } else {
        newParentInfo.style.display = 'block';
        parentNameInput.required = true;
        phoneInput.required = true;
    }
});
</script>
{% endblock %} 